// import React, { Component, PureComponent } from "react";

// class Child extends PureComponent {
//   render() {
//     console.log("child render");
//     return <div>child</div>;
//   }
// }

// class App extends Component {
//   state = {
//     count: 5,
//   };

//   obj = { a: 3 };

//   fn = () => {
//     this.setState({
//       count: this.state.count + 1,
//     });
//   };

//   fn2 = () => {
//     console.log(123);
//   };

//   render() {
//     return (
//       <>
//         <h3>useCallback</h3>
//         <p>{this.state.count}</p>
//         <button onClick={this.fn}>btn</button>
//         <Child obj={this.obj} doSomeThing={this.fn2} />
//       </>
//     );
//   }
// }

// export default App;

import React, { useState, memo, useCallback, useMemo } from "react";
// memo是一个高阶组件，作用和PureComponent是完全相同的
// useCallback叫做缓存函数
// 里面有两个参数，第一个是函数，第二个是依赖的数组

// 当一个函数需要作为自定义事件传递给子组件的时候，必须要加上useCallback

const Child = memo(() => {
  console.log("child render");
  return <div>child组件</div>;
});

// 整一个函数组件相当于以前的render
// 一旦有数据改变，整个函数都要重新执行
const App = () => {
  const [count, set_count] = useState(5);
  const fn = () => {
    set_count((v) => v + 1);
  };
  // 相当于fn2被缓存了，下次更新的时候，还是指向这个函数
  // const fn2 = useCallback(() => {
  //   console.log(123);
  // }, []);

  const fn2 = useMemo(
    () => () => {
      console.log(123);
    },
    []
  );
  return (
    <>
      <h3>useCallback</h3>
      <p>{count}</p>
      <button onClick={fn}>btn</button>
      <Child doSomeThing={fn2} />
    </>
  );
};

export default App;
